<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable, ElDialog, ElForm, ElFormItem, ElInput } from "element-plus"
import Header from "@/views/content/util/header.vue"
import { onMounted, ref } from "vue"
import { getStaffListApi } from '@/apis/staffApi'
import { res } from '@/pojo/dto/res'
//组件
import StaffDetails from '@/views/content/components/staff/staffDetails.vue'
import Limit from "@/views/content/util/limit.vue"
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"
import SButton from "@/views/content/util/button/sButton.vue"


const loadingItemList = ref(false)
const getLimitItemList = (displayedItemList: Array<Object>) => {
  console.log("接收：")
  console.log(displayedItemList)
  limitItemList.value = displayedItemList
}

const itemList = ref([])
const limitItemList = ref([])

const showEdit = ref(false)
const editStaffId = ref()

const getItemList = async () => {
  loadingItemList.value = true
  const res: res = await getStaffListApi()
  itemList.value = res.data
  itemList.value = itemList.value.map(row => {
    return {
      ...row,
      status: row.status === 1 ? true : false
    };
  })
  if (res.code == 0) {
    loadingItemList.value = false
  }
}
onMounted(() => {
  getItemList()
})
</script>

<template>
  <div style="width: 97%;">
    <Header title="员工管理"></Header>
    <div>
      <div>
        <IButton @click="editStaffId = undefined; showEdit = true;" title="添加员工"></IButton>
        <IButton title="导出员工" type="out"></IButton>
      </div>
      <div v-show="!loadingItemList" style="margin-top: 20px">
        <el-table :data="limitItemList" :row-key="(row) => row.id"  
          :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
          >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
          <el-table-column label="ID" prop="staffId"></el-table-column>
          <el-table-column label="员工姓名" prop="name"></el-table-column>
          <el-table-column label="用户组" prop="groupName"></el-table-column>
          <el-table-column label="登录账号" prop="phone"></el-table-column>
          <el-table-column label="启用状态" prop="status">
            <template #default="{ row }">
              <el-switch v-model="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template #default="{ row }">
              <div class="button-container">
                <el-tooltip content="编辑" placement="top">
                  <OButton @click="showEdit = true; editStaffId = row.staffId"></OButton>

                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <OButton type="delete"></OButton>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="loadingItemList" style="display: flex;justify-content: center;">
        <img src="@/assets/images/loading.gif" />
      </div>


      <div v-if="showEdit">
        <StaffDetails :title="editStaffId ? '编辑员工' : '添加员工'" :staff-id="editStaffId ? editStaffId : null"
          @exit-edit-page=" showEdit = false"></StaffDetails>
      </div>

      <div>
        <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
      </div>
    </div>
  </div>
</template>
<style scoped>
::v-deep .el-table th>.cell {
  color: black;
}


::v-deep .disabled .el-upload--picture-card {
  display: none !important;
}



.caozuo-button {
  width: 30px;
  height: 15px;
  font-size: 10px;
}
</style>
